<template>
  <div style="height: 90%">
    <ta-layout-header :style="{ background: '#fff', padding: 0 }">
      <ta-breadcrumb style="margin: 1rem 0">
        <ta-breadcrumb-item>
          <span class="title">薪资发放情况表</span> 
        </ta-breadcrumb-item>
      </ta-breadcrumb>
    </ta-layout-header>
    <ta-layout-content :style="{ margin: '1.5rem 1rem 0', height: '85%' }">
      <ta-row :style="{ background: '#fff', padding: '24px', height: '100%' }">
        <ta-col :span="3">
          <ta-select
            @change="statusSelect"
            size="large"
            placeholder="筛选发放状态"
            :options="statusList"
            :allowClear="true"
            style="width: 100%"
          ></ta-select>
        </ta-col>
        <ta-col :span="5" style="margin-left: 2rem">
          <ta-cascader
            :options.sync="departmentList"
            @change="branchChange"
            placeholder="按部门筛选"
            :allowClear="true"
            notFoundContent="暂无筛选选项"
            size="large"
            style="width: 100%"
          />
        </ta-col>
        <ta-col :span="5" style="margin-left: 2rem">
          <ta-input-search
            placeholder="员工姓名搜索"
            @search="nameSearch"
            enterButton
            style="width: 100%;"
            size="large"
          />
        </ta-col>
        <ta-col :span="8" style="margin-left: 2rem">
          <ta-button 
            angle="5px" 
            type="primary" 
            size="large"
            :loading="btnInLoading"
            style="margin: 0 2rem"
          >导入信息</ta-button>
          <ta-button 
            angle="5px" 
            type="primary" 
            size="large"
            :loading="btnOutLoading"
          >导出信息</ta-button>
        </ta-col>
        <ta-col style="margin-top: 4rem">
          <ta-table
            :columns="tableTitle"
            :dataSource="tableData"
            :loading="tableLoading"
            :rowSelection="rowSelection"
          >
            <ta-table-edit slot="name" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="employeeId" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="idCard" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="bankCard" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="phoneNum" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="status" slot-scope="text, record" type="select" :option="selectStatus" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="grade" slot-scope="text, record" type="select" :option="gradeList" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="dutiable" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <span slot="performance" slot-scope="text, record">
              <ta-rate :defaultValue="text" allowHalf disabled/>
            </span> 
            <ta-table-edit slot="payCount" slot-scope="text, record" type="input" @change="changeData" :row-editable="false"></ta-table-edit>
            <ta-table-edit slot="payStatus" slot-scope="text, record" type="select" :option="statusList" @change="changeData" :row-editable="false"></ta-table-edit>
          </ta-table>
        </ta-col>
        <ta-col style="margin-top: 2rem">
          <ta-pagination
            style="float: right;"
            :dataSource.sync="tableData"
            :defaultPageSize="10"
            :pageSizeOptions="['5','10','20']"
            :params="userPageParams"
            size="large"
          />
        </ta-col>
      </ta-row>
    </ta-layout-content>
  </div>
</template>

<script>

const tableTitle = [
  {title: '姓名',dataIndex: 'name', scopedSlots: {customRender: 'name'}},
  {title: '员工编号', dataIndex: 'employeeId', scopedSlots: {customRender: 'employeeId'}},
  {title: '身份证号', dataIndex: 'idCard', scopedSlots: {customRender: 'idCard'}},
  {title: '银行卡号', dataIndex: 'bankCard', scopedSlots: {customRender: 'bankCard'}},
  {title: '手机号码', dataIndex: 'phoneNum', scopedSlots: {customRender: 'phoneNum'}},
  {title: '岗位状态', dataIndex: 'status', scopedSlots: {customRender: 'status'}},
  {title: '员工等级', dataIndex: 'grade', scopedSlots: {customRender: 'grade'}},
  {title: '税务缴纳', dataIndex: 'dutiable', scopedSlots: {customRender: 'dutiable'}},
  {title: '绩效评分', dataIndex: 'performance', scopedSlots: {customRender: 'performance'}},
  {title: '到手薪资', dataIndex: 'payCount', scopedSlots:{customRender: 'payCount'}},
  {title: '发放状态', dataIndex: 'payStatus', scopedSlots:{customRender: 'payStatus'}}
]

export default {
  name: 'salaryList',
  data () {
    return {
      tableTitle,
      tableLoading: false,
      btnInLoading: false,
      btnOutLoading: false,
      selectStatus: [
        {
          value: '0',
          label: '离职'
        },
        {
          value: '1',
          label: '在职'
        }
      ],
      statusList: [
        {
          value: '0',
          label: '未发放'
        },
        {
          value: '1',
          label: '已发放'
        },
        {
          value: '2',
          label: '未到账'
        },
        {
          value: '3',
          label: '已到账'
        }
      ],
      gradeList: [
        {
          value: 'F',
          label: '实习员工',
          name: 'sx'
        },
        {
          value: 'E',
          label: '初级员工',
          name: 'cj'
        },
        {
          value: 'D',
          label: '中级员工',
          name: 'zj'
        },
        {
          value: 'C',
          label: '高级员工',
          name: 'gj'
        },
        {
          value: 'B',
          label: '项目经理',
          name: 'jl'
        },
        {
          value: 'A',
          label: '公司顶层领导',
          name: 'ld'
        }
      ],
      departmentList: [
        {
          value: 'yb',
          label: '医保行业部',
          children: [
            {
              value: 'kf',
              label: '控费产品部',
              children: [
                {
                  value: 'kaifa',
                  label: '开发组'
                }
              ]
            }
          ]
        }
      ],
      tableData: [
        {
          name: '张三',
          employeeId: '2019090111',
          idCard: '511023199611264578',
          bankCard: '6217003640001234523',
          phoneNum: '12345678998',
          status: '1',
          grade: 'E',
          dutiable: '623',
          performance: 4.5,
          payCount: '6500',
          payStatus: '3'
        }
      ],
      rowSelection: {
        selectedRowKeys: [],
        onChange: this.onSelectChange
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    changeData ({newData, record, columnKey}) {
      // 将单元格数据修改为新值（newData：返回改变的值、record：该行的行数据、columnKey：该列的key）
      record[columnKey] = newData
    },
    statusSelect (value, option) {
      console.log(value)
    },
    branchChange (value,selectedOptions) {
      console.log(selectedOptions)
    },
    nameSearch (value) {
      console.log(value)
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.rowSelection.selectedRowKeys = selectedRowKeys
      console.log(selectedRowKeys,selectedRows)
    },
    userPageParams () {
      return {}
    }
  }
}
</script>

<style scoped>
  .title {
    font-size: 1.125rem;
    display: inline-block;
    margin: 1rem 2rem;
  }
</style>